<template>
  <div class="Home">
    <input type="file" multiple @click="noChange"/>
    <button @click="onUpload">上传</button>
     <ul>
       <li v-for="item in imgsList" :key="item.url">
         <img :src="item.url" alt="" />
       </li>
     </ul>
      
    
  </div>
</template>

<script>
const OSS = require("ali-oss");
export default {
  data() {
    return {
      imgsList:[],
       client: new OSS({
         region: 'oss-cn-beijing',
         bucket: 'devin0831',
         accessKeyId: 'LTAI5tF5SC1ZSCHLYiCa6NQh',
         accessKeySecret: 'yVRUyZBOy8sXSmmw4rd0j08ZxOOEVN',
    })
    }
  },
  methods: {
    noChange(e){
      const files = e.target.files;
      const imgArr = [];
      for(let file of files){
        imgArr.push(this.onUpload(file))
      }
      Promise.all(imgArr).then(res => {
        this.imgsList = res
      })
      this.imgsList = files;
    },
    async onUpload(file){
      const imgsData = await this.client.put(
        `${Math.random() * 100}_imgs`,file
      )
      return imgsData
    }
  },
}
</script>

<style>
</style>